<template>
	<view class="home-page">
		<u-navbar leftIconColor="rgba(255,255,255,0.0)" :autoBack="false" :placeholder="true"
			bgColor="rgba(255,255,255,0.0)">
			<view slot="center" class="nav-title">
				首页
			</view>
		</u-navbar>
		<view class="content">
			<u-swiper :list="bannerList" keyName="picUrl" height="300rpx"></u-swiper>
			<view class="line"></view>
			<view class="brief">
				We are a leading specialty insurer and reinsurer.
				We pride ourselves on our expert, pragmatic
				and innovative approach tto providing bespoke
				insurance solutions to complex needs. We bring
				Clarty from Complexity™.
			</view>
			<view class="brief brief-title">
				Financial strength
			</view>
			<view class="line"></view>
			<view class="title">
				$431m
			</view>
			<view class="text">
				Net income for year end 2024
			</view>
			<view class="line"></view>
			<view class="title">
				86.8%
			</view>
			<view class="text">
				Combined Operating Ratio for year end 2024
			</view>
			<view class="line"></view>
			<view class="title">
				$4.6bn
			</view>
			<view class="text">
				Gross Written Premiums for year end 2024
			</view>
			<view class="line"></view>
		</view>
		<view class="video">
			<image src="../../static/real/photo.png" mode=""></image>
		</view>
		<view class="news-head">
			<view class="head-title">
				News & Views
			</view>
			<view class="head-text">
				更多资讯实时更新
			</view>
		</view>
		<view class="news-box">
			<view class="news-item">
				<image src="../../static/real/photo.png" mode=""></image>
				<view class="news-content">
					<view class="news-title">
						强强联合!全国名校联盟正式成立，共赴新征程
					</view>
					<view class="news-text">
						在二十大新的教育精神指引下，新时代教育篇章徐徐展开。为顺应新的教育发展趋势，深化教育改革内容。
					</view>
					<view class="news-text">
						2025.05.06 新华网
					</view>
				</view>
			</view>
			<view class="news-item">
				<image src="../../static/real/photo.png" mode=""></image>
				<view class="news-content">
					<view class="news-title">
						强强联合!全国名校联盟正式成立，共赴新征程
					</view>
					<view class="news-text">
						在二十大新的教育精神指引下，新时代教育篇章徐徐展开。为顺应新的教育发展趋势，深化教育改革内容。
					</view>
					<view class="news-text">
						2025.05.06 新华网
					</view>
				</view>
			</view>
			<view class="news-item">
				<image src="../../static/real/photo.png" mode=""></image>
				<view class="news-content">
					<view class="news-title">
						强强联合!全国名校联盟正式成立，共赴新征程
					</view>
					<view class="news-text">
						在二十大新的教育精神指引下，新时代教育篇章徐徐展开。为顺应新的教育发展趋势，深化教育改革内容。
					</view>
					<view class="news-text">
						2025.05.06 新华网
					</view>
				</view>
			</view>
		</view>
		<view class="aspen">
			<view class="aspen-title">
				Aspen
			</view>
			<view class="aspen-text">
				Company and Regulatory Information <br>
				Terms And Conditions<br>
				accessibility<br>
				The Modern Slavery Act<br>
				Privacy and Data Subject Requests<br>
				Complaint handling procedure <br>
				Aspen Insurance Holdings Limited
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				bannerList: []
			}
		},
		onLoad() {
			this.getbanner()
		},
		methods: {
			getbanner() {
				let params = {
					position: 1
				}
				this.$Request({
					method: 'GET',
					url: '/app-api/promotion/banner/list',
					data: params,
					ismsg: false,
				}).then(res => {
					if (res.code == 0) {
						this.bannerList = res.data
						console.log(this.bannerList)
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.home-page {
		background-image: url('../../static/real/home-bg.png');
		background-repeat: no-repeat;
		background-size: 100% 362rpx;
		min-height: 90vh;
		padding: 30rpx;

		.nav-title {
			color: #fff;
		}

		.content {
			padding: 30rpx;
			background: linear-gradient(180deg, #B1DFD2 0%, #FFFFFF 100%);
			border-radius: 30rpx;

			.line {
				background-color: #1CC28B;
				width: 126rpx;
				height: 4rpx;
				margin-top: 30rpx;
			}

			.brief {
				color: #333333;
				font-size: 28rpx;
				margin-top: 30rpx;
			}

			.brief-title {
				font-weight: bold;
			}

			.title {
				color: #333333;
				font-size: 48rpx;
				font-weight: bold;
				margin-top: 40rpx;
			}

			.text {
				font-size: 28rpx;
				color: #999999;
				margin-top: 10rpx;
			}
		}

		.video {
			margin-top: 30rpx;

			image {
				width: 100%;
				height: 300rpx;
			}
		}

		.news-head {
			background-image: url('../../static/home/home-title.png');
			background-repeat: no-repeat;
			background-size: 100% 100%;
			padding: 30rpx 30rpx 80rpx;
			margin-top: 30rpx;
			color: #fff;

			.head-title {
				font-size: 36rpx;
				font-weight: bold;
			}

			.head-text {
				font-size: 24rpx;
				margin-top: 5rpx;
			}
		}

		.news-box {
			padding: 30rpx 30rpx 10rpx;
			background-color: #FFFFFF;
			margin-top: -50rpx;
			border-radius: 30rpx;
			box-shadow: 0rpx 3rpx 32rpx 1rpx rgba(0, 0, 0, 0.08);

			.news-item {
				color: #fff;
				border-radius: 30rpx;
				background: linear-gradient(91deg, #106E80 0%, #34B477 100%);
				margin-bottom: 30rpx;

				image {
					width: 100%;
					height: 300rpx;
				}

				.news-content {
					padding: 20rpx;
					margin-top: -10rpx;

					.news-title {
						font-size: 28rpx;
						font-weight: bold;
					}

					.news-text {
						font-size: 24rpx;
						margin-top: 10rpx;
					}
				}
			}
		}

		.aspen {
			background: linear-gradient(180deg, #B1DFD2 0%, #FFFFFF 100%);
			text-align: center;
			border-radius: 30rpx;
			margin-top: 30rpx;
			padding: 30rpx;
			box-shadow: 0rpx 3rpx 32rpx 1rpx rgba(0, 0, 0, 0.08);

			.aspen-title {
				color: #333333;
				font-size: 36rpx;
				font-weight: bold;
			}

			.aspen-text {
				margin-top: 20rpx;
				font-size: 24rpx;
				color: #333333;
			}
		}
	}
</style>